<html>

<head>
    <title>批次配置窗口</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../static/react/react.development.js" type="text/javascript"></script>
    <script src="../../static/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../../static/react/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="../../static/react/babel.min.js" type="text/javascript"></script>
    <!-- antd -->
    <link href="../../static/react/antd/antd.min.css" rel="stylesheet" type="text/css" />
    <script src="../../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
    <!-- axios -->
    <script src="../../static/react/axios.min.js" type="text/javascript"></script>
    <script src="../../static/react/qs.js" type="text/javascript"></script>
    <script src="../../static/react/lodash.min.js" type="text/javascript"></script>
    <script src="../../static/react/request.js" type="text/javascript"></script>
    <script src="../../ffres/dict/all.js" type="text/javascript"></script>
    <link href="../../static/react/common.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    .logo {
        height: 32px;
        margin: 16px;
        background: rgba(255, 255, 255, 0.3);
        color: #FFF;
        text-align: center;
        line-height: 32px;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div id="app"> </div>
    <script type="text/babel">
    // 请求后台相对路径
    const baseURL = "../../"
    // ant design 组件别名引用
    const { Layout, Menu, Tabs,  Row, Col, Form, Input, Select, DatePicker, Button, Table, Modal, message } = antd
    // 业务组件 
    class App extends React.Component {
        constructor(props){
            super(props)
            this.siderCollapsed = this.siderCollapsed.bind(this)
            this.loadSider = this.loadSider.bind(this)
            this.menuItemClick = this.menuItemClick.bind(this)
            this.windowResize = this.windowResize.bind(this)
            this.tabChange = this.tabChange.bind(this)
            this.tabEdit = this.tabEdit.bind(this)

            let search = window.location.search
            if (search.startsWith('?')) {
                search = search.substring(1, search.length)
            }
            search = Qs.parse(search)
            this.state = {
                collapsed: false,
                menus: [],
                ...search,

                tabs: [],
                currentTab: "homePage",
                iframeHeight: 0
            }
            
        }
        loadSider() {
            const self = this
            API.request({
                baseURL: baseURL,
                method: "post",
                dataType: "form",
                url: "api/bat/batch/stage/configs",
                data: Qs.stringify({
                    batchId: this.state.batchId
                })
            }).then(function(data){
                self.setState({
                    menus: data.rows
                })
                if (data.rows && data.rows.length > 0) {
                    self.setState(function(state, props){
                        state.tabs.push({
                            key: data.rows[0].stageId,
                            name: data.rows[0].stageName,
                            path: 'BatTaskUnitConfigList.html?batchId='+state.batchId+"&stageId="+data.rows[0].stageId,
                            closable: true
                        })
                        state.currentTab = data.rows[0].stageId
                        return state
                    })
                }
            })
        }
        menuItemClick({ item, key, keyPath, domEvent }) {
            const self = this
            const existsItem = self.state.tabs.find(function(el){
                return el.key == key
            })
            if (existsItem) {
                self.setState({
                    currentTab: existsItem.key
                })
                return;
            }
            const menu = self.state.menus.find(function(el){
                return el.stageId == key
            })
            if (menu) {
                self.setState(function(state, props){
                    state.tabs.push({
                        key: menu.stageId,
                        name: menu.stageName,
                        path: 'BatTaskUnitConfigList.html?batchId='+state.batchId+"&stageId="+menu.stageId,
                        closable: true
                    })
                    state.currentTab = menu.stageId
                    return state
                })
            }
        }
        siderCollapsed(collapsed) {
            this.setState({
                collapsed
            })
        }
        tabChange(tabKey) {
            this.setState({
                currentTab: tabKey
            })
        }
        tabEdit(targetKey, action){
            if (action == 'remove')
                this.remove(targetKey);
        };
        remove(targetKey) {
            const { tabs, currentTab } = this.state;
            let newActiveKey = currentTab;
            let lastIndex;
            tabs.forEach((pane, i) => {
                if (pane.key === targetKey) {
                    lastIndex = i - 1;
                }
            });
            const newPanes = tabs.filter(pane => pane.key !== targetKey);
            if (newPanes.length && newActiveKey === targetKey) {
                if (lastIndex >= 0) {
                    newActiveKey = newPanes[lastIndex].key;
                } else {
                    newActiveKey = newPanes[0].key;
                }
            }
            this.setState({
                tabs: newPanes,
                currentTab: newActiveKey,
            });
        };
        windowResize() {
            let iframeHeight = window.innerHeight - 40 - 16
            this.setState({
                iframeHeight: iframeHeight
            })
        }
        componentDidMount() {
            this.loadSider()
            this.windowResize()
            window.addEventListener('resize', this.windowResize);
        }
        componentWillUnmount() {
            window.removeEventListener('resize', this.windowResize);
        }
        render() {
            return (
                <div>
                    <Layout>
                        <Layout.Sider collapsible collapsed={this.state.collapsed} onCollapse={this.siderCollapsed}>
                            <div className="logo">批次阶段信息</div>
                            <Menu theme="dark" defaultOpenKeys={['1']} mode="inline" onClick={this.menuItemClick}>
                                <Menu.SubMenu title={this.state.batchName} key="1">
                                    {
                                        this.state.menus.map((item, index)=>(
                                            <Menu.Item key={item.stageId}>{item.stageName}</Menu.Item>
                                        ))
                                    }
                                </Menu.SubMenu>
                            </Menu>
                        </Layout.Sider>	
                        <Layout.Content>
                            <div style={{background: "#FFF"}}>
                                <Tabs type="editable-card" activeKey={this.state.currentTab} hideAdd={true}    
                                    onChange={this.tabChange} onEdit={this.tabEdit}>
                                    {this.state.tabs.map(tab => (
                                    <Tabs.TabPane tab={tab.name} key={tab.key} closable={tab.closable}>
                                        <div style={{ height : this.state.iframeHeight }}>
                                            <iframe name={tab.key} src={tab.path} height="100%" width="100%" frameBorder="0" scrolling="auto"></iframe>
                                        </div>
                                    </Tabs.TabPane>
                                    ))}
                                </Tabs>    
                            </div>
                        </Layout.Content>
                    </Layout>
                </div>
            )
        }
    }
    ReactDOM.render(
        <antd.ConfigProvider locale={antd.locales.zh_CN}>
            <App />
        </antd.ConfigProvider>,
        document.getElementById('app')
    );
    </script>
</body>
</html>